import React, {Component} from 'react';
import './index.css';
import {InputNumber, Slider, Radio, Select} from 'antd';
import Ajax from '../../common/ajax';
import SlideInput from '../../common/SlideInput/index';
import BaseOpts from '../BaseOpts';

const RadioGroup = Radio.Group;
const Option = Select.Option;

class ArtListOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {}
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
            blockList: []
        };
    }

    render() {
        var {data, blockList} = this.state;
        var {style, dataset, layout, layout} = data;
        var curBlockId = dataset.block ? dataset.block.id : '';
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);

        layout = layout || 'row';

        return (
            <div className="optsPanel">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">链接到</label>
                    <div className="optsPanel__item__bd">
                        <Select
                            value={curBlockId}
                            style={{width: 120}}
                            onSelect={(v) => {
                                this._getArtList(v);
                            }}
                        >
                            <Option value="">请选择</Option>
                            {
                                blockList.map(function (block) {
                                    return (
                                        <Option key={block.id} value={block.id}>{block.title}</Option>
                                    )
                                })
                            }
                        </Select>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">文章布局</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup onChange={(e) => {
                            this.$dataChange('layout', e.target.value, false);
                        }} defaultValue={layout}>
                            <Radio value={'row'}>横向排版</Radio>
                            <Radio value={'column'}>竖向排版</Radio>
                        </RadioGroup>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} value={marginBottom} onChange={(val) => {
                            this.$dataChange('marginBottom', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <div className="optsPanel__item__bd">
                        <a href="/admin/GoodsModule/listPage?show_type=1" target="_blank"
                           className="ant-btn-dataMng ant-btn ant-btn-primary ant-btn-lg">数据管理</a>
                    </div>
                </div>
            </div>
        );
    }

    componentDidMount() {
        this._getArtBlocks();
    }

    //获取模块列表
    _getArtBlocks() {
        var _self = this;

        Ajax.G('/openapi/CHome/getDataBlock', {
            type: 1
        }, function (res) {
            var result = res['result'];

            _self.setState({
                blockList: result.dataBlock
            });
        });
    }

    //获取商品列表
    _getArtList(blockId) {
        var _self = this;
        var {blockList} = this.state;
        var block;

        blockList.some(function (b) {
            if (b.id == blockId) {
                block = b;
                return true;
            }
        });

        Ajax.G('/openapi/CHome/getDataBlockContent', {
            module_id: blockId
        }, function (res) {
            var result = res['result'];
            var artList = result['dataBlockContent'];

            artList = artList.map(function (item) {
                delete item.content;
                return item;
            });
            _self.$dataChange(['block', 'artList'], [block, artList], 'dataset');
        });
    }
}

export default ArtListOpts;
